<template>
  <div>
    <div class="header-container">
      <div class="header-contain">
        <div class="container">
          <div class="header-box">
            <div>
              <div class="header-logo">
                <a href="/" title="cloud learning">
                  <img class="logo" src="../assets/header/logo.png"/>
                  <div class="logo-content">
                    <p class="name">知否-社区版</p>
                    <p class="desc">zhifou ce version</p>
                  </div>
                </a>
              </div>
              <div class="header-content">
                <ul class="header-content-head">
                  <li class="header-top-list-last header-top-nav-more-large">
                    <el-dropdown class="dropdown-nav" :hide-on-click="false" placement="bottom-start">
                      <a class="header-nav-item header-top-nav">网站导航<i class="el-icon-arrow-down el-icon--right"></i></a>
                      <template #dropdown>
                        <el-dropdown-menu class="dropdown-nav-menu">
                          <el-dropdown-item class="nav-panel">
                            <div class="nav-item-content" v-for="item in categoryList" :key="item.label">
                              <div style="font-size: 16px;margin-bottom: 20px;">{{item.label}}</div>
                              <dl class="top-nav-channel">
                                <dd>
                                  <router-link v-for="c in item.children" :to="{path: '/' + item.type + '/list', query: {cid: c.value}}" :key="c.value">
                                    {{c.label}}
                                  </router-link>
                                </dd>
                              </dl>
                            </div>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </li>
                </ul>
              </div>
              <div class="header-search hidden-sm-and-down">
                <div class="header-search-input">
                  <el-input v-model="keyword" :placeholder="defaultKeyword" autoComplete="off"/>
                  <div class="header-search-button-box" @click="search">
                    <a class="header-search-button">
                      <i class="el-icon-search" style="padding-left: 20px;"></i><span>搜索</span>
                    </a>
                  </div>
                </div>
              </div>
              <div class="header-user-center">
                <div class="header-user-item" v-if="isLogin">
                  <router-link to="/member/learn-record">
                    <span class="el-icon-video-camera" style="font-size:24px"></span>
                    <span class="icon-title">学习记录</span>
                  </router-link>
                </div>
                <div class="header-user-item" v-if="isLogin">
                  <router-link to="/member/favorites">
                    <span class="el-icon-star-off" style="font-size:24px"></span>
                    <span class="icon-title">收藏</span>
                  </router-link>
                </div>
                <div class="header-user-item" v-if="isLogin">
                  <router-link to="/member/message">
                    <span class="el-icon-chat-line-square" style="font-size:24px"></span>
                    <span class="icon-title">私信</span>
                  </router-link>
                </div>
                <div class="header-user-item" v-if="!isLogin">
                  <a href="/register">
                    <span class="el-icon-circle-plus-outline" style="font-size:24px"></span>
                    <span class="icon-title">注册</span>
                  </a>
                </div>
                <div class="header-user-item">
                  <el-dropdown class="dropdown" v-if="isLogin">
                    <a>
                      <img :src="member.avatar" v-if="isLogin" style="width: 20px;height: 20px;"/>
                      <span class="icon-title" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{member.name}}</span>
                    </a>
                    <template #dropdown>
                      <el-dropdown-menu :style="{'display:none;': !isLogin}">
                        <router-link :to="{path: '/member/personal'}" class="color-black">
                          <el-dropdown-item class="menu-item">
                            个人信息
                          </el-dropdown-item>
                        </router-link>
                        <router-link :to="{path: '/member/setting'}" class="color-black">
                          <el-dropdown-item class="menu-item">
                            设置
                          </el-dropdown-item>
                        </router-link>
                        <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                  <a v-else @click="showLogin">
                    <i class="el-icon-user" style="font-size:24px"></i>
                    <span class="icon-title" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{member.name}}</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Login :show="showLoginFlag" @callback="loginCallback" @success="successCallback"/>
  </div>
</template>

<script>
  import {ref} from "vue"
  import router from "../router"
  import {getToken} from "../util/tokenUtils"
  import {getUser} from "../util/userUtils";
  import {loginOut} from "../api/login";
  import {getMember} from "../api/member";
  import {getCategory} from "../api/index";

  export default {
    name: "HeaderIndex",
    components: {},
    setup(){
      const showLoginFlag = ref(false)
      const isLogin = ref(!!getToken())
      const categoryList = ref([])
      const defaultKeyword = "Spring Cloud"
      const keyword = ref("")
      const loadCategory = () => {
        getCategory( (res) => {
          categoryList.value.push(res)
        })
      }
      loadCategory();
      let member;
      const loginMember = getUser();
      if (loginMember && getToken()) {
        member = ref(loginMember);
      } else {
        member = ref({
          name: "未登录",
          avatar: ""
        })
      }
      const showLogin = function() {
        // 没登录显示登陆框
        if (!getToken()) {
          showLoginFlag.value = true
          isLogin.value = false
        } else {
          showLoginFlag.value = false
          isLogin.value = true
        }
      }
      const loginCallback = function() {
        showLoginFlag.value = false
      }
      const successCallback = async function() {
        isLogin.value = true;
        const user = await getMember()
        member.value = user;
      }
      const logout = function() {
        loginOut();
        isLogin.value = false
        member.value = {name: "未登录", avatar: ""}
        router.push({path: "/index"});
      }
      const search = function() {
        let key = keyword.value
        if (!key) {
          key = defaultKeyword
        }
        router.push({path: "/search/list", query:{ keyword: key}});
      }
      return{
        showLoginFlag,
        isLogin,
        member,
        categoryList,
        defaultKeyword,
        keyword,
        showLogin,
        loginCallback,
        successCallback,
        logout,
        search
      }
    }
  }
</script>

<style lang="scss">
  .hidden {
    display: none;
  }
  .header-container, .header-fixed {
    width: 100%;
    position: absolute;
    z-index: 2000;
    top: 0;
    box-sizing: initial;
    .header-contain {
      width: 100%;
      height: 60px;
      background: #fff;
      .container {
        position: relative;
        z-index: 10;
        margin: 0 auto;
        max-width: 1400px;
        min-width: 1300px;
        .header-box{
          position: relative;
          margin: 0 auto;
          height: 60px;
          z-index: 1290;
          background: #ffffff;
          .header-logo {
            float: left;
            margin: 8px 20px 7px 10px;
            border: 0;
            .logo {
              width: 44px;
              vertical-align: top;
            }
            .logo-content {
              display: inline-block;
              margin-left: 10px;
              color: #000;
              .name {
                line-height: 28px;
                font-size: 22px;
                font-family: "Times New Roman",Georgia,serif;
              }
              .desc {
                line-height: 14px;
                font-size: 12px;
                opacity: .6;
              }
            }
          }
          .header-content {
            float: left;
            height: 38px;
            margin: 11px 20px 11px 0;
            visibility: visible;
            .header-content-head {
              li {
                float: left;
                position: relative;
                margin-right: 0;
                &:hover {
                  a {
                    color: #415fff;
                  }
                }
                a {
                  color: #000000;
                  display: block;
                  padding: 0 8px;
                  font-size: 14px;
                  line-height: 38px;
                  text-decoration: none;
                  zoom: 1;
                  position: relative;
                }
              }
              li:last-child {
                margin-right: 20px;
              }
            }
          }
          .header-search {
            height: 38px;
            margin: 11px auto;
            padding-right: 92px;
            position: absolute;
            left: 50%;
            text-align: left;
            transform: translate(-50%);
            -ms-transform: translate(-50%);
            -webkit-transform: translate(-50%);
            -moz-transform: translate(-50%);
            -o-transform: translate(-50%);
            .header-search-input {
              width: 100%;
              white-space: nowrap;
              .el-input {
                vertical-align: top;
                .el-input__inner {
                  height: 38px;
                  border-radius: 20px 0 0 20px;
                  background: #f7f7f7;
                  border: 0;
                }
              }
              .header-search-button-box {
                width: 92px;
                height: 38px;
                border-radius: 0 20px 20px 0;
                overflow: hidden;
                right: 0;
                top: 0;
                display: inline-block;
                .header-search-button {
                  display: inline-block;
                  width: 92px;
                  height: 38px;
                  border-radius: 0 20px 20px 0;
                  color: #000;
                  background: #f5f5f5;
                  font-size: 14px;
                  &:hover {
                    color: #415fff
                  }
                  span {
                    margin-left: 3px;
                    line-height: 38px;
                    display: inline-block;
                  }
                }
              }
            }
          }
          .header-user-center {
            float: right;
            height: 60px;
            .header-user-item {
              &:hover {
                a {
                  color: #415fff;
                }
              }
              float: left;
              width: 52px;
              height: 60px;
              text-align: center;
              a {
                width: 48px;
                height: 42px;
                font-size: 12px;
                line-height: 20px;
                margin: 8px 0;
                display: inline-block;
                color: #000000;
                cursor: pointer;
                .icon-title {
                  display: block;
                  font-size: 12px;
                  line-height: 20px;
                  width: 100%;
                  text-align: center;
                  left: 0;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
<style lang="scss" scoped>
  .dropdown-nav-menu {
    .nav-panel {
      cursor: auto;
      -webkit-animation-duration: .3s;
      animation-duration: .3s;
      padding: 0;
      line-height: normal;
      background: #fff;
      color: #000000;
      .nav-item-content {
        padding: 20px 0 0 25px;
        dl {
          content: "";
          display: table;
          clear: both;
        }
        dd {
          padding: 0;
          margin: 0;
          border: 0;
          font-size: 0;
          width: 600px;
          float: left;
          a {
            text-decoration: none;
            zoom: 1;
            position: relative;
            float: left;
            cursor: pointer;
            border-bottom: none;
            padding: 0;
            vertical-align: top;
            font-size: 14px;
            margin: 0 22px 12px 0;
            display: inline-block;
            line-height: 20px;
            width: auto;
            overflow: hidden;
            text-overflow: inherit;
            white-space: nowrap;
            text-align: center;
            color: #000;
            &:hover {
              color: #415fff;
            }
          }
        }
      }
    }
  }
  .color-black {
    color: #000000;
  }
  .menu-item {
    &:hover {
      color: #415fff!important;
      a {
        color: #415fff;
      }
    }
  }
  .nav-panel:focus, .nav-panel:not(.is-disabled):hover {
    background-color: #ffffff;
    color: inherit;
  }
</style>
